---
const { className } = Astro.props;
---

<style>
  [aria-label="ENHANCE ASCII Logo"] {
    position: relative;
    background-image: var(--hdr-green-gradient);
    background-size: 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    background-repeat: repeat;
  }

  [aria-label="Magnifying Glass"] {
    background-image: var(--radial-silver-gradient);
    background-size: 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    background-repeat: repeat;
  }
</style>

<div class={`relative ${className}`}>
  <pre
    aria-label="Magnifying Glass"
    class="absolute -top-[100%] text-lg leading-[1.1] -tracking-[1px] opacity-45 md:-left-1/3 md:opacity-65">
      _.-·--._      
    .´        `.    
   ╱            \   
  ¡             ▕   
  |        ╱╱   ;|  
  :        ╱╱   ;;  
  :╲          .´/   
   \`-.__..·-´.'    
    `╱╱╱___.-´      
    ╱╱╱             
   ╱╱╱              
  ╱╱╱               
 (_╱                
</pre>
  <pre
    aria-label="ENHANCE ASCII Logo"
    class="text-2xl leading-none lg:text-3xl">
▐▔▔▐▚ ▌▐ ▌▐▔▌▐▚ ▌▐▔▔▐▔▔
▐▛▁▐ ▚▌▐▔▌▐▔▌▐ ▚▌▐▁▁▐▛▁
</pre>
</div>
